﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display</title>
  <link type="text/css" href="../base.css" rel="stylesheet">
  <link type="text/css" href="index.css" rel="stylesheet">
</head>
<body>
<nav>
  CSS Course by @Castle
</nav>

<div id="body">
  <h1 class="page-title">Display:block</h1>
  <div style="border:1px solid red;">Block</div>

  <span>Inline</span>
  <span>Inline</span>
  <span>Inline</span>
  <span>Inline</span>
  <span>Inline</span>
  <span>Inline</span>
  <span>Inline</span>

  <h1 class="page-title">Display:inline</h1>
  <h1>
    Welcome to my site
    <div class="inline">
      You are signed in
    </div>
  </h1>

  <h1 class="page-title">Display:inline-block</h1>
  <div class="inline square">
    #1
  </div>

  <div class="inline square">
    #2
  </div>

  <h1 class="page-title">Display:none</h1>

  <div style="display: none">
    hello js
  </div>

  </div>

</body>
</html>